<template>
  <div class="game-container">
    <GameHeader />
    
    <GameInfo 
      :score="score" 
      :moves="moves"
      :time-left="timeLeft"
      :target-score="targetScore"
      :game-started="gameStarted"
    />
    
    <GameBoard 
      :board="board"
      @cell-click="selectCell"
    />
    
    <GameControls 
      @reset="resetGame"
      @hint="hint"
    />
    
    <GameOverModal 
      :game-over="gameOver"
      :game-won="gameWon"
      :score="score"
      :target-score="targetScore"
      :moves="moves"
      :time-left="timeLeft"
      @restart="resetGame"
    />

    <!-- 3D小人组件 -->
    <Game3DCharacter 
      :time-left="timeLeft"
      :game-started="gameStarted"
      :game-over="gameOver"
    />
  </div>
</template>

<script>
import { reactive, ref, onMounted } from 'vue'
import GameHeader from './GameHeader.vue'
import GameInfo from './GameInfo.vue'
import GameBoard from './GameBoard.vue'
import GameControls from './GameControls.vue'
import GameOverModal from './GameOverModal.vue'
import Game3DCharacter from './Game3DCharacter.vue'
import { useGameLogic } from '../composables/useGameLogic.js'

export default {
  name: 'XiaoXiaoLeGame',
  components: {
    GameHeader,
    GameInfo,
    GameBoard,
    GameControls,
    GameOverModal,
    Game3DCharacter
  },
  setup() {
    const {
      board,
      score,
      moves,
      timeLeft,
      targetScore,
      gameOver,
      gameWon,
      gameStarted,
      initBoard,
      selectCell,
      resetGame,
      hint
    } = useGameLogic()

    onMounted(() => {
      initBoard()
    })

    return {
      board,
      score,
      moves,
      timeLeft,
      targetScore,
      gameOver,
      gameWon,
      gameStarted,
      selectCell,
      resetGame,
      hint
    }
  }
}
</script>

<style scoped>
.game-container {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  text-align: center;
  max-width: 500px;
  margin: 20px;
}
</style> 